<template>
	<el-dialog :title="title" v-model="open" append-to-body :close-on-click-modal="false" width="800px">
    <el-row :gutter="20">
      <el-form :model="queryParams" ref="queryFormRef" :inline="true" v-show="showSearch">
        <!-- <el-form-item label="商品ID" prop="goods_id">
          <el-input v-model="queryParams.goods_id" placeholder="请输入商品ID" clearable></el-input>
        </el-form-item> -->
        <el-form-item>
          <!-- <el-button type="primary" icon="el-icon-search" @click="onQuery">搜索</el-button>
          <el-button icon="el-icon-refresh" @click="onResetQuery">重置</el-button> -->
          <el-button @click="onExport" type="warning" plain icon="el-icon-download">导出</el-button>
        </el-form-item>
      </el-form>
    </el-row>
    <el-row :gutter="20">
      <el-table :data="tableList" v-loading="loading">
        <el-table-column label="发货时间" align="center" prop="send_time" />
        <el-table-column label="订单号" align="center" prop="order_sn" />
        <el-table-column label="快递单号" align="center">
          <template #default="{ row }">
            <el-link type="primary" @click="onCheckLogistics(row)">{{ row.freight_sn }}</el-link>
          </template>
        </el-table-column>
        <el-table-column label="快递公司" align="center" prop="freight_name" />
        <el-table-column label="快递编码" align="center" prop="freight_number" />
        <el-table-column label="收货地址" align="center">
          <template #default="{ row }">
            {{ row.province }} {{ row.city }} {{ row.county }} {{ row.address }}
          </template>
        </el-table-column>
      </el-table>

      <pagination-component
        style="margin: auto;"
        v-show="total > 0"
        :total="total"
        v-model:page="queryParams.pageNum"
        v-model:limit="queryParams.pageSize"
        @pagination="getList"
      />
    </el-row>

		<CheckLogisticsDialog ref="checkLogisticsRef" />
	</el-dialog>
</template>

<script lang="ts">
import { reactive, ref, toRefs } from 'vue';
import { ElLoading, ElMessage, ElMessageBox } from 'element-plus';
import { handleDownloadByName } from '/@/utils/utils';
import { logisticsStatisticsApi } from '/@/api/admin1';
import CheckLogisticsDialog from './checkLogisticsDialog.vue';

const LogisticsStatisticsApi = logisticsStatisticsApi()
export default {
  name: 'logisticsOrderStatisticsDialog',
	components: {
		CheckLogisticsDialog,
	},
	setup() {
		const state = reactive({
			showSearch: true,
			title: '物流订单统计',
			open: false,
			queryParams: {
				pageNum: 1,
				pageSize: 10,
        goods_id: '',
				send_time: '',
        logistics: '',
			},
			tableList: [],
			loading: false,
			total: 0,
		});

    let start_page: number = 1; // 导出页数
		let start_page_total: number = 1; // 导出总页数
		const queryFormRef = ref(null);
		const loadingDownloadRef = ref(null);
		const checkLogisticsRef = ref(null);

		/********** 点击事件(on开头) **********/
    // 搜索
		const onQuery = () => {
			state.queryParams.pageNum = 1;
			getList();
		};
    // 重置
		const onResetQuery = () => {
			(queryFormRef.value as any)?.resetFields();
			onQuery();
		};
    // 导出物流订单
		const onExport = () => {
			(loadingDownloadRef.value as any) = ElLoading.service({
				lock: true,
				text: '正在导出，请耐心等待...',
				background: 'rgba(0, 0, 0, 0.7)',
			});
			_logisticsStatisticsOrderExport({
        ...state.queryParams,
        start_page: 1,
      });
		};
		// 查看物流
		const onCheckLogistics = (row: any) => {
			(checkLogisticsRef.value as any)?.openDialog({ order_sn: row.order_sn });
		};

		/********** 方法事件 **********/
		// 打开
		const openDialog = (config: any) => {
			state.open = true;
			state.queryParams = {
				pageNum: 1,
				pageSize: 10,
				send_time: config.send_time,
        goods_id: config.goods_id,
        logistics: config.logistics,
			};
			getList();
		};
		const getList = () => {
			state.loading = true;
			_logisticsStatisticsOrderList(state.queryParams)
		};

		/********** 网络请求 **********/
		// 物流订单统计
		const _logisticsStatisticsOrderList = (_data: any) => {
			LogisticsStatisticsApi.logisticsStatisticsOrderList(_data)
				.then((res: any) => {
					state.loading = false;
					state.tableList = res.data.list;
					state.total = res.data.total;
				})
				.catch(() => (state.loading = true));
		};
    // 导出物流订单
		const _logisticsStatisticsOrderExport = (_data: object) => {
			if (start_page <= start_page_total) {
				LogisticsStatisticsApi.logisticsStatisticsOrderExport(_data)
					.then((res: any) => {
						start_page == 1 && (start_page_total = res.data.info.count_page);
						start_page++;
						handleDownloadByName(res.data.info.url, '物流订单导出', false);
						_logisticsStatisticsOrderExport({ start_page: 1, ..._data });
						if (start_page >= start_page_total) {
							(loadingDownloadRef.value as any)?.close();
							start_page = 1;
							start_page_total = 1;
						}
					})
					.catch(() => {
						(loadingDownloadRef.value as any)?.close();
						start_page = 1;
						start_page_total = 1;
					});
			}
		};

		return {
      queryFormRef,
      loadingDownloadRef,
			checkLogisticsRef,
			getList,
			openDialog,
      onQuery,
      onExport,
      onResetQuery,
			onCheckLogistics,
			...toRefs(state),
		};
	},
};
</script>
